<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.0.3.js"></script>
    <style>
        ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        li{width:20px;height:20px;
            float: left;
            background-image: url(img/star.png);
            background-repeat: no-repeat;
            background-position:0 0;
            margin-top: 10px;
        }
        #div1{
            width: 150px;
            height:70px;
            position: absolute;
            top:60px;
            left:10px;
            display: none;
        }
    </style>
</head>
<body>
<span>点击星星就能评分</span>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<p></p>
<div id="div1">
</div>
</body>
</html>
<script>
    $(function(){
        $('ul li').each(function(index){
            var shuzu =['1分,不满意，发货不及时，多萨科夫','2分都是粪斯蒂芬森的都是粪','3分，对方是否斯蒂芬缩放的','4分但是咖啡馆和扩建速度很快','5分第三方过度疯狂进攻和扩大解放和高科技东方航空监管和扩建']
            //鼠标移入
            $(this).mouseover(function(){
                for(var i =0;i<=index;i++){
                    $('ul li').eq(i).css('backgroundPosition', '100% 100%')
                }
                $('#div1').css('display', 'block').html(shuzu[index])
            });
            $(this).mouseout(function(){
                $('ul li').css('backgroundPosition','0 0');
                $('#div1').css('display','none');
                $('p').css('display','none')
            });
            $(this).click(function(){
                $('ul li').slice(0 , index +1).css('backgroundPosition','100% 100%');
                $('p').css('display','block').html(shuzu[index]);
                $('#div1').css('display','block').html(shuzu[index])
            });
//            //鼠标移出for循环
//            for(var i=0;i<5;i++) {
//                li[i].index = i
//                li[i].addEventListener('mouseout', function () {
//                    mouseout(i)
//                    div.style.display='none'
//                })
//            }
//            //清楚点击背景颜色
//            function clear(){
//                for(var i=0;i<li.length;i++){
//                    li[i].style.backgroundPosition='0 0'
//                }
//            }
//
//
//            //鼠标移入函数
//
//            function mouseover(b) {
//                for (var i = 0; i < b; i++) {
//                    li[i].style.backgroundPosition = '100% 100%'
//                }
//            }
//            //鼠标点击函数
//            function click(a){
//                for(var i=0;i<a;i++){
//                    li[i].style.backgroundPosition='100% 100%'
//
//                }
//            }
//            //点击for循环
//            for(var i=0;i<5;i++) {
//                li[i].index = i
//                li[i].addEventListener('click', function () {
//                    clear()
//                    p.innerHTML = shuzu[this.index]
//                    click(this.index +1)
//                })
//            }
        })
    })
</script>